<template>
  <div>
    <div class="header">
      <div class="one1">
        <div>联系我们:</div>
        <img src="/img/footer/qq.png" alt="" />
        <div>2252212044</div>
        <img src="/img/footer/ph.png" alt="" />
        <div>0379-66838888</div>
        <div class="sos">
          <input placeholder="请输入查询内容" type="text" class="ss" />
          <div class="quan">
            <select class="xl">
              <option>全站</option>
              <option>景点</option>
              <option>文章</option>
              <option>图册</option>
            </select>
          </div>
          <img src="/img/footer/ss.png" class="sstb" />
          <el-row class="an" v-if="$store.state.islogin">
            <div>
              <el-menu
                :default-active="loginIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="rgb(56,56,56)"
                text-color="#fff"
                active-text-color="red"
                style="margin-top: -10px; margin-left: 35px"
              >
                <el-submenu index="2">
                  <template slot="title">{{ $store.state.username }}</template>
                  <el-menu-item index="2-1">个人中心</el-menu-item>
                  <el-menu-item index="2-2" @click="exit">退出</el-menu-item>
                </el-submenu>
                <!-- <el-menu-item index="6" v-else
                  ><router-link to="/user">注册/登录</router-link></el-menu-item> -->
              </el-menu>
            </div>
          </el-row>
          <el-row class="an" v-else>
            <router-link to="/login"
              ><el-button type="info"> 登录 </el-button></router-link
            >
            <router-link to="/Register"
              ><el-button type="primary">注册</el-button></router-link
            >
          </el-row>
        </div>
      </div>
    </div>
    <div class="toubu">
      <img src="/img/logo.png" alt="" />
      <div class="daohang">
        <button>
          <router-link style="color: black" to="/">景区首页</router-link>
        </button>
        <button>
          <router-link style="color: black" to="/Photo">奇景一览</router-link>
        </button>
        <button>
          <router-link style="color: black" to="/Details">活动攻略</router-link>
        </button>
        <button>
          <router-link style="color: black" to="/Reserve">票务预订</router-link>
        </button>
        <button>
          <router-link style="color: black" to="/Info">新闻资讯</router-link>
        </button>
        <button>
          <router-link style="color: black" to="/About">关于我们</router-link>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: {
    myHeader,
  },
  data() {
    return {
      loginIndex: "2",
      // activeIndex: location.href.substring(location.href.lastIndexOf("/") + 1),
    };
  },
  methods: {
    //  handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleSelect(key, keyPath) {},
    exit() {},
  },
};
</script>
<style scoped>
.daohang button {
  width: 100px;
  height: 62px;
  background-color: rgb(255, 255, 255);
  border: 0;
  border-bottom: 2px solid white;
}
.daohang button:hover {
  border-bottom: 2px solid red;
  background-color: rgb(255, 81, 81);
}
.toubu {
  margin: 0 10%;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}
.header {
  margin: auto;
  min-width: 1200px;
  height: 60px;
  background-color: rgb(56, 56, 56);
}
.one1 {
  color: rgb(179, 179, 179);
  width: 1200px;
  margin: auto;
}
.one1 > div {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
}
.one1 > img {
  width: 20px;
  height: 22px;
  vertical-align: middle;
  margin: 15px;
}
.ss {
  width: 225px;
  height: 28px;
  border: 0;
  margin-left: -250px;
  margin-top: -15px;
}
.quan {
  width: 100px;
  height: 30px;
  background-color: #fff;
  margin-top: -30px;
  margin-left: -350px;
  border: 0;
  line-height: 33px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.sos {
  float: right;
}
.xl {
  width: 100px;
  border: 0;
}
.sstb {
  width: 30px;
  height: 30px;
  margin-top: -50px;
  margin-left: -25px;
  border: 0;
  background-color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.an {
  margin-left: 13px;
  margin-top: -50px;
}
/* .one {
  min-width: 1200px;
  height: 40px;
  background-color: rgb(99, 98, 98);
  margin: auto;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.two {
  position: absolute;
} */
</style>
<script>
</script>